<template>
  <el-container>
    <!-- 搜索框 -->
    <el-aside class="searchBox">
      <el-input
          v-model="adminList.name"
          class="w-50 m-2"
          size="large"
          placeholder="请输入管理员名称"
          v-on:keyup.enter="getAdminLists"
      />

    </el-aside>
    <el-button type="primary" plain size="large" class="search" @click="getAdminLists">查询</el-button>

    <!-- 新增按钮 -->
    <el-main class="searchButton">
      <el-button type="primary" text @click="dialogVisible = true">添加管理员</el-button>
      <!-- 添加管理员消息弹框 -->
      <el-dialog
          v-model="dialogVisible"
          title="添加管理员"
          width="30%"
      >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            label-width="120px"
            class="demo-ruleForm"
        >

          <el-form-item label="管理员名称" prop="age">
            <el-input v-model.number="ruleForm.name" />
          </el-form-item>
          <el-form-item label="管理员用户名" prop="checkPass">
            <el-input v-model="ruleForm.username"/>
          </el-form-item>
          <el-form-item label="管理员密码" prop="pass">
            <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="确认密码" prop="pass">
            <el-input v-model="ruleForm.passwordAck" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="管理员类型">
            <el-radio-group v-model="ruleForm.type">
              <el-radio label="super" size="large">超级管理员</el-radio>
              <el-radio label="ordinary" size="large">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <template #footer>
          <span>
            <el-button @click="cancelHandle()">取消</el-button>
            <el-button type="primary" @click="insertHandle()">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </el-main>
  </el-container>

<!--  修改管理员-->
  <el-dialog
      v-model="updateDialogVisible"
      title="修改管理员"
      width="30%"
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
    >

      <el-form-item label="管理员名称" prop="age">
        <el-input v-model.number="ruleForm.name" />
      </el-form-item>
      <el-form-item label="管理员用户名" prop="checkPass">
        <el-input v-model="ruleForm.username"/>
      </el-form-item>
      <el-form-item label="管理员密码" prop="pass">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="确认密码" prop="pass">
        <el-input v-model="ruleForm.passwordAck" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="管理员类型">
        <el-radio-group v-model="ruleForm.type">
          <el-radio label="super" size="large">超级管理员</el-radio>
          <el-radio label="ordinary" size="large">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
          <span>
            <el-button @click="cancelHandle()">取消</el-button>
            <el-button type="primary" @click="updateAdminHandle(ruleForm.value)">确认</el-button>
          </span>
    </template>
  </el-dialog>

  <!-- 数据列表 -->

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="管理员名称" width="180" />
    <el-table-column prop="username" label="管理员用户名" width="180" />
    <el-table-column prop="createUser" label="创建人" />
    <el-table-column prop="updateTime" label="创建时间" />

    <!-- 功能按钮 -->
    <el-table-column #default="scope" label="操作">
      <el-row class="mb-4">
        <el-button type="primary" plain @click="selectAdminById(scope.row.id)">修改</el-button>
        <el-button type="success" plain @click="deleteAdminById(scope.row.id)">删除</el-button>
      </el-row>
    </el-table-column>
  </el-table>


  <!-- 分页工具条 -->
  <div class="page">
    <el-pagination
        class="mt-4"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        v-model:total="total"
        :hide-on-single-page="true"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<script setup>
import "@/assets/styles/book.css";
import {onMounted, onUpdated, ref, watch} from "vue";
import {ElMessage} from 'element-plus'
import {getBackendName, getBackendType} from "@/utils/auth";
import {addAdmin, deleteAdmin, getAdminList, showAdminById, updateAdmin} from "@/api/backend";
import {useRoute, useRouter} from "vue-router";
import md5 from "js-md5";

const route = useRoute();

const adminList = ref({
  // 管理员类型
  backendType: route.params.type,
  // 搜索框绑定数据模型
  name: "",
  pageNum: 1,
  pageSize: 10
});
// 总条数
const total = ref(300)
// 当前页
const currentPage = ref(1);
// 每页显示条目数
const pageSize = ref(10);
// 修改管理员消息弹框默认参数
const updateDialogVisible = ref(false)
// 添加管理员消息弹框默认参数
const dialogVisible = ref(false)
// 添加管理员数据模型
const ruleForm = ref({
  name: "",
  username: "",
  password: "",
  passwordAck: "",
  updateTime: "",
  type: "",
  createUser: ""
})

// 列表数据
const tableData = ref([{
  id: 1,
  name: "管理员名称",
  username: "管理员用户名",
  createUser: "创建人",
  updateTime: "创建时间"
}]);

const cancelHandle = () => {
  ruleForm.value = {};
  dialogVisible.value = false;
  updateDialogVisible.value = false;
}

onMounted(() => {
  getAdminLists();
});

const type = ref(route.params.type)

onUpdated(() => {
  type.value = route.params.type;
  // console.log(id.value);
})
watch(type, () => {
  adminList.value.backendType = type.value;
  adminList.value.pageSize = 10;
  // console.log(adminList.value.backendType)
  getAdminLists(adminList);
});

const getAdminLists = async () => {

  const {data} = await getAdminList(adminList.value);

  tableData.value = data.list;
  currentPage.value = parseInt(data.pageNum);
  pageSize.value = parseInt(data.pageSize);
  total.value = parseInt(data.total);
}

// 每页显示行数
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  adminList.value.pageSize = val;
  getAdminLists();
}
// 当前页
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  adminList.value.pageNum = val;
  getAdminLists();
}

// 添加管理员
const insertHandle = async () => {

  if (ruleForm.value.password !== ruleForm.value.passwordAck) {
    ElMessage.error("两次输入密码不同");
  }
  if (!ruleForm.value.password) {
    ElMessage.error("密码不能为空");
  }
  if (!ruleForm.value.username) {
    ElMessage.error("用户名不能为空")
  }

  ruleForm.value.updateTime = new Date();
  ruleForm.value.createUser = getBackendName();
  ruleForm.value.password = md5(ruleForm.value.password);
  ruleForm.value.passwordAck = md5(ruleForm.value.passwordAck);

  // console.log(ruleForm.value);

  await addAdmin(ruleForm.value);

  ruleForm.value = {};
  dialogVisible.value = false;
}

//修改管理员
const updateAdminHandle = async () => {
  if (ruleForm.value.password !== ruleForm.value.passwordAck) {
    ElMessage.error("两次输入密码不同");
  }
  if (!ruleForm.value.password) {
    ElMessage.error("密码不能为空");
  }
  if (!ruleForm.value.username) {
    ElMessage.error("用户名不能为空")
  }

  ruleForm.value.updateTime = new Date();
  ruleForm.value.createUser = getBackendName();
  ruleForm.value.password = md5(ruleForm.value.password);
  ruleForm.value.passwordAck = md5(ruleForm.value.passwordAck);

  // console.log(ruleForm.value)

  await updateAdmin(ruleForm.value);

  getAdminLists();

  updateDialogVisible.value = false;
}
const selectAdminById = async (id) => {
  updateDialogVisible.value = true;

  const {data} = await showAdminById(id);

  ruleForm.value = data;
}

// 删除管理员
const deleteAdminById = async (id) => {
  console.log(id);

  const success = await deleteAdmin(id);
  if (success.ok) {
    ElMessage.success("删除成功");
    getAdminLists();
  } else {
    ElMessage.error("删除失败")
  }
}

</script>

<style scoped lang="scss">
.searchBox {
  width: 300px;
  height: 70px;
  line-height: 50px;
  padding: 5px;
}
.search {
  margin: 10px;
}
.searchButton {
  width: 200px;
  height: 60px;
  line-height: 60px;
  padding: 0;
  position: absolute;
  right: 5px;
}
.el-pagination {
  justify-content: center;
}
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background-color: lightblue !important;
}
.el-pagination {
  --el-pagination-hover-color: lightblue !important;
}
</style>